import 'dart:io';

import 'package:dio/dio.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_enjoy_plus/api/user.dart';
import 'package:flutter_enjoy_plus/utils/Emitter.dart';
import 'package:flutter_enjoy_plus/utils/toast.dart';
import 'package:image_picker/image_picker.dart';

class ProfilePage extends StatefulWidget {
  const ProfilePage({super.key,required this.userInfo});
  final Map<String,dynamic> userInfo;

  @override
  State<ProfilePage> createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  final TextEditingController _nickNameController = TextEditingController();
  // 获取头像部件
  Widget getAvatar() {
    // 鸿蒙端 上传图片之后 沙箱目录 / data /
    if (widget.userInfo["avatar"] != null && widget.userInfo["avatar"] != "") {
      // web端 -> network  1. http/https 2. blob
      // 鸿蒙端 -> network 1. http/https
      //      -> /data 沙箱本地目录
      // 判断 如果图片路径是以/data开头的 -> Image.file
      if (widget.userInfo['avatar'].startsWith('/data')) {
        // startsWith() 是 Dart 字符串方法，用于检查字符串是否以指定的前缀开头
        // 鸿蒙端
        return Image.file(
          File(widget.userInfo['avatar']),
          width: 30,
          height: 30,
        );
      }
      return Image.network(
        widget.userInfo["avatar"],
        width: 30,
        height: 30,
      );
    }
    return Image.asset(
      'assets/images/avatar_1.jpg',
      width: 30,
      height: 30,
    );
  }
  // @override
  // void initState() {
  //   // TODO: implement initState
  //   super.initState();
  // }

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
    if(widget.userInfo["avatar"] != null && widget.userInfo["avatar"] != ""){
      _nickNameController.text = widget.userInfo["nickName"];
    }
  }
  
  // 是否选择图片
  bool isSelectPhoto = false;
  // 是否正在上传中
  bool isUploading = false;
  // 文件名称
  String fileName = "";

  // 选择图片
  _selectPhoto() async {
    // 图片选择
    final ImagePicker picker = ImagePicker();
    // source:图片来源
    // gallery:相册
    // camera:相机
    final XFile? image = await picker.pickImage(source: ImageSource.gallery);
    if(image != null){
      // image是一个blob 临时地址（临时显示图片）
      // 选择了图片，则
      isSelectPhoto = true;
      // 赋值图片名称
      fileName = image.name;
      PrompAction.showInfo('选择图片成功');

      // 实现图片地址赋值-更新头像
      setState(() {
        widget.userInfo['avatar'] = image.path; // blob地址
      });
      // 关闭弹层
      Navigator.pop(context);
    }
  }

  // 保存用户信息
  void saveUserInfo() async {
    if(_nickNameController.text.isEmpty){
      PrompAction.showFail('昵称不能为空');
      return;
    }
    RegExp reg = RegExp(r'^[\u4e00-\u9fa5_a-zA-Z0-9]{2,18}');
    if(!reg.hasMatch(_nickNameController.text)){
      PrompAction.showFail('昵称格式不正确,不符合允许中文字母数字下划线2-18位');
    }
    // 上传图片
    // data formdata对象
    // 1.生成一个formdata对象 
    // isSelectPhoto 目的：避免重复上传
    
    if(!isUploading){
      if(isSelectPhoto){
        // 执行上传图片的··逻辑
        // 基于Map对象 -> 转成FormData对象  ||  创建FormData对象用于多部分表单上传
        FormData data = FormData.fromMap({
          // file需要上传的二进制数据 -> 已知有blob临时地址
          // formBytes -> 生成二进制数据   || file字段：上传的二进制文件数据
          // "file": MultipartFile.fromBytes(
          //   // value -> 二进制数据   
          //   // ||   1.从widget的userInfo中获取avatar路径创建XFile对象
          //   //      2.异步读取文件的字节数据
          //   await XFile(widget.userInfo['avatar']).readAsBytes(),
          //   // filename -> 文件名
          //   filename: fileName,
          //   // 适配鸿蒙端做出的修改-文件类型删除
          //   // 文件类型
          //   // contentType: DioMediaType('image','png')
          // ),


          // 旧版本 (windows目前不清楚) -> 针对于鸿蒙和web端 单独生成file
          // web端 MultipartFile.fromBytes
          // 鸿蒙端 MultipartFile.fromFileSync
          // 如何做: 需要判断设备环境
          // web KisWeb
          // android / ohos / ios  -> Platform.isAndroid
          // react-native / uniapp / flutter (痛点不是业务 -> 多端适配)
          // MultipartFile.fromFileSync(widget.userInfo['avatar'])
          "file": kIsWeb
              ? MultipartFile.fromBytes(
                  // value -> 二进制数据
                  await XFile(widget.userInfo['avatar']).readAsBytes(),
                  // filename -> 文件名称
                  filename: fileName,
                  // 文件类型
                  // contentType: DioMediaType('image', 'png')
                )
              : MultipartFile.fromFileSync(widget.userInfo['avatar']),
          // 附加表单字段：标识为上传类型为头像
          "type":"avatar"
        });     
        // 上传图片请求
        final res = await uploadImageAPI(data);
        setState(() {
          widget.userInfo['avatar'] = res['url'];
        });
      }
    else{
      PrompAction.showSuccess('正在上传中');
    }
    }
    // 保存昵称
    await updataUserInfoAPI({
      "nickName": _nickNameController.text,
      "avatar": widget.userInfo['avatar'] // 头像地址没有变化
     });
    //  上传状态 -> false
    isUploading = false;
    //  是否选择图片 -> false
    isSelectPhoto  = false;
    //  PrompAction.showSuccess('修改个人信息成功');
     // 需求: 针对于web端 -> 提示内容 -> 测试 -> web端 修改昵称...
      if (kIsWeb) {
        // web端
        PrompAction.showSuccess("web - 修改昵称成功");
      } else {
        PrompAction.showSuccess("修改昵称成功");
      }
     eventBus.fire(LoginEvent()); // 不用返回?因为可能修改头像了
     // 保存成功后
      // Navigator.pop(context, true); // 带一个true回去
  }

  // 生成选择头像的弹窗
  void _showAvatarDialog() {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return SizedBox(
            width: double.infinity,
            height: 180,
            child: Column(
              children: [
                Container(
                  alignment: Alignment.center,
                  height: 60,
                  decoration: const BoxDecoration(
                      border: Border(
                          bottom: BorderSide(width: 0.5, color: Colors.grey))),
                  child: const Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(Icons.camera_alt),
                      SizedBox(
                        width: 10,
                      ),
                      Text(
                        "拍照",
                        style: TextStyle(fontSize: 20),
                      )
                    ],
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  height: 60,
                  decoration: const BoxDecoration(
                      border: Border(
                          bottom: BorderSide(width: 0.5, color: Colors.grey))),
                  child: GestureDetector(
                    behavior: HitTestBehavior.opaque,
                    onTap: (){
                      _selectPhoto();
                    },
                    child: const Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.photo_album),
                        SizedBox(
                          width: 10,
                        ),
                        Text(
                          "相册",
                          style: TextStyle(fontSize: 20),
                        )
                      ],
                    ),
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  height: 60,
                  child: GestureDetector(
                    onTap: () {
                      Navigator.pop(context);
                    },
                    child: const Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Icon(Icons.cancel_outlined),
                        SizedBox(
                          width: 10,
                        ),
                        Text(
                          "取消",
                          style: TextStyle(fontSize: 20),
                        )
                      ],
                    ),
                  ),
                )
              ],
            ),
          );
        });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('个人信息'),
        backgroundColor: Colors.transparent,
        centerTitle: true,
      ),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: [
          SizedBox(
            height: 40,
            child: Row(
              children: [
                const Text(
                  '头像',
                  style: TextStyle(fontSize: 16),
                ),
                const Spacer(),
                Row(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(50.0),
                      child: GestureDetector(
                        onTap: () {
                          // TODO: 处理头像点击事件
                          // PrompAction.showSuccess('头像点击事件');
                          _showAvatarDialog();
                        },
                        child: getAvatar(),
                      ),
                    ),
                    const Icon(Icons.arrow_forward_ios, size: 12)
                  ],
                )
              ],
            ),
          ),
          Row(
            children: [
              const Text('昵称'),
              const Spacer(),
              Expanded(
                child: TextField(
                  // 双向绑定
                  controller: _nickNameController,
                  decoration: const InputDecoration(
                    hintText: '请输入昵称',
                    border: InputBorder.none,
                  ),
                  textAlign: TextAlign.right,
                ),
              ),
              const Icon(Icons.arrow_forward_ios, size: 12)
            ],
          ),
          const SizedBox(
            height: 20,
          ),
          Row(
            children: [
              Expanded(
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color.fromARGB(255, 85, 145, 175),
                    minimumSize: const Size(100, 50),
                  ),
                  onPressed: () {
                    saveUserInfo();
                  },
                  child: const Text(
                    '保存',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

